<script setup>
import {ref} from 'vue'
import swapper from './components/swapper.vue';
import productList from '../../../components/productList.vue';
import { getAllProduct } from '../../../apis/admin/product';
const product = ref([]);
const total = ref(0);
const pagation = ref({
  limit:12,
  page:1,
})

function initProduct(){
  getAllProduct({
    ...pagation.value,
    state:1
  }).then(res=>{
    product.value = res.data.list;
    total.value = res.data.total;
  })
}
initProduct();
</script>


<template>
  <div class="home_page">
    <div class="home_top">
      <swapper />
    </div>
    <div class="home_bottom">
      <productList :list="product" style="height: 600px;"/>
      <div class="pagation">
        <a-pagination
          :total="total"
          :show-total="total => `总共 ${total} 条`"
          :page-size="pagation.limit"
          v-model:current="pagation.page"
          @change="initProduct"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home_bottom {
  .pagation{
    display: flex;
    justify-content: flex-end;
  }
}
</style>